<template>
  <div id="dialogMember">
    <el-dialog
      title="圈子成员"
      :visible.sync="dialogData.isShow"
      :before-close="labelHandleClose"
      width="800px"
      top="30px"
    >
      <!-- 搜索 -->
      <div class="search-box">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >

          <el-form-item label="查询" prop="dpAccount">
            <el-input
              clearable
              v-model.trim="formInline.dpAccount"
              placeholder="大鹏号"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户属性" prop="userType">
            <el-select
              v-model="formInline.userType"
              filterable
              placeholder="请选择"
            >
              <el-option label="用户" value="USER"></el-option>
              <el-option label="马甲" value="VEST"></el-option>
            </el-select>
          </el-form-item>
         
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch('ruleForm')"
            >
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-conBtn">
        <span class="num">共 {{ personNum }} 人</span>
        <el-button
          v-permission="'wh:system:circleManageMember:import'"
          type="warning"
          class="el-icon-upload2"
          @click="importBtn"
        >
          导入
        </el-button>
        <el-button
          v-permission="'wh:system:circleManageMember:remove'"
          type="warning"
          plain
          @click="delMul"
        >
          批量删除
        </el-button>
        <freshCom @searchList="searchList"></freshCom>
      </div>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        height="450"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="60" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>

        <!-- <el-table-column
          label="用户ID"
          prop="userId"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column> -->

        <el-table-column
          label="用户昵称"
          prop="nickName"
          min-width="100"
        ></el-table-column>

        <el-table-column
          label="大鹏号"
          prop="dpAccount"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column>

        <el-table-column label="用户属性" prop="userType" align="center" min-width="100">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.userType">
              {{ scope.row.userType === 'USER' ? '用户': '马甲' }}
            </el-tag>
            <span v-else> --- </span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-permission="'wh:system:circleManageMember:remove'" type="text" @click="delSingle(scope.row.userId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <!-- 提交按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">
          关闭
        </el-button>
      </div>
    </el-dialog>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="circleMember"
    ></errorDialog>
  </div>
</template>
<script>
import {
  getMemberList,
  delMember,
  importUrl,
  circleInfoById
} from '@/api/circle/circleManage' // 接口
import { downUrl } from '@/api/activeManagement/templatePage' // 接口
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗

export default {
  name: 'AddSetUser',
  props: ['dialogData', 'powerAry'],
  components: {
    importDialog,
    errorDialog
  },
  data() {
    return {
      loading: false,
      id: '',
      total: 0,
      tableData: [], // table内容
      personNum: 500,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        userType: '',
        dpAccount: '',
        v:2
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '导入圈子成员',
        url: '', // 导入接口
        downUrl: '', // 下载模板接口
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      multipleSelection: []
    }
  },
  mounted() {
    this.id = this.dialogData.id
    this.getStateList()
    this.getCircleInfo()
  },
  methods: {
    async getStateList() {
      this.setDefault()
      this.searchList()
    },
    /*设置初始值*/
    setDefault() {
      this.formInline.userType = ''
    },
    /*获取圈子详情*/
    getCircleInfo() {
      circleInfoById(
        this.id,
        (res) => {
          this.personNum = res.statisticalData.joinUserCount
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getMemberList(
        this.id,
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    // 打开dialog弹出框
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importUrl(this.id) // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 批量删除 */
    delMul() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(`确定要删除选中的圈子成员?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.userId)
        })
        let obj = {
          userId: ids,
          isJson: true
        }
        delMember(
          this.id,
          obj,
          (response) => {
            this.searchList()
            this.getCircleInfo()
            this.$emit('refresh')
          },
          (response) => {
            this.$message.warning('删除失败,' + response.message)
          }
        )
      })
    },
    /* 删除单个 */
    async delSingle(id) {
      this.$confirm(`确定要删除该圈子成员？`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          userId: [id],
          isJson: true
        }
        delMember(
          this.id,
          obj,
          (response) => {
            this.searchList()
            this.getCircleInfo()
            this.$emit('refresh')
          },
          (response) => {
            this.$message.warning('删除失败,' + response.message)
          }
        )
      })
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
      this.setDefault()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 导入失败弹窗 */
    showError(text, res) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.searchParams.pageNum = 1
      this.getCircleInfo()
      this.searchList()
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="less">
#dialogMember {
  .num {
    color: #333;
    margin-right: 10px;
    font-weight: bold;
  }
  .search-box,
  .table-conBtn {
    padding-left: 0 !important;
  }
  .el-dialog {
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
    .el-dialog__body {
      padding: 30px 20px 0;
    }
    .page {
      margin-top: 15px;
    }
  }
}
</style>
